<template>
  <div class="content_v">
    <div class="title">{{data.article.title}}</div>
    <div class="article_info">
      <div class="left">
        <img class="head_img_small left" v-bind:src="authorInfo.avatar">
        <div class="left author_name fourth_tex">{{authorInfo.name}}</div>
      </div>
      <div class="right fourth_text">
        <span>{{getDateDifference(data.article.createTime)}}</span>~{{data.commentCount}}条评论
      </div>
    </div>
    <div class="article_content">
      <div v-for="content in articleList">
        <div v-if="content.articleType == 'text'" class="content_text">{{content.data.text}}</div>
        <div v-else class="content_img">
          <img class="m_img" v-bind:src="getImgUrl(content.data.url)">
        </div>
      </div>
    </div>
    <div class="gradation_red_btn dl_btn read_all" @click="$common.downloadApp()">打开“一起买买买APP”阅读全文</div>
    <div class="share_user">
      <div class="left mar_div">
        <img class="left head_img_middle" v-bind:src="shareUserInfo.avatar">
        <div class="left share_user_info">
          <div class="share_user_name">{{shareUserInfo.name}}</div>
          <div class="share_remark fourth_tex">在用<span class="red">一起买买买</span>邀请你</div>
        </div>
      </div>
      <div class="right rmar_div">
        <div class="gradation_red_btn follow_btn" @click="$common.downloadApp()">下载</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Content',
    props: ['articleInfo'],
    data() {
      return {
        data: this.articleInfo, // 文章信息
        authorInfo: { // 作者信息
          name: "匿名作者",
          avatar: "https://c2.gogoh5.com/gsf/se/tasks/user_head_bg.png"
        },
        shareUserInfo: { // 分享信息
          name: "您的好友",
          avatar: "https://c2.gogoh5.com/gsf/se/tasks/user_head_bg.png"
        },
        articleList: [] // 文章内容列表
      }
    },
    created() {
      console.log("content created");
    },
    mounted() {
      console.log("content mounted this.commentCount=" + this.data.commentCount);
      // this.articleInfo.map(function (item, index, array) {
      //   console.log("item=" + item);
      //   return item;
      // });
      this.buildContent();
    },
    methods: {
      // 分享文章内容
      buildContent() {
        this.authorInfo = this.data.authorInfo ? this.data.authorInfo : this.authorInfo;
        this.shareUserInfo = this.data.shareUserInfo ? this.data.shareUserInfo : this.shareUserInfo;
        // 文章内容解析列表
        let content = JSON.parse(this.data.article.content);
        this.articleList = content ? content : [];
      },
      // 计算发文时间
      getDateDifference(timestamp) {
        let nowTimestamp = new Date().getTime();
        if (nowTimestamp >= timestamp) {
          let result = "";
          let timediff = nowTimestamp - timestamp;
          let days = parseInt(timediff / 86400000); //计算天数
          result = days + "天前";
          if (days >= 30) {
            let months = parseInt(days / 30);
            result = months + "月前";
          } else if (days == 0) {
            let hours = parseInt(timediff / 3600000); //计算小时数
            result = hours + "小时前";
            if (hours == 0) {
              let mins = parseInt(timediff / 60000); //计算分钟数
              result = mins + "分钟前";
            }
          }
          return result;
        } else {
          return "";
        }
      },

      getImgUrl(url) {
        return this.cdn + url;
      }
    }
  }
</script>
